<template>
  <div class="container">
    <n-drawer v-model:show="isDrawer" :width="width">
      <n-drawer-content :title="title" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="用户名" path="username">
            <n-input placeholder="请输入用户名" v-model:value="formParams.username" />
          </n-form-item>
          <n-form-item label="用户ID" path="userId">
            <n-input placeholder="请输入用户ID" v-model:value="formParams.userId" />
          </n-form-item>
          <n-form-item label="手机号" path="phone">
            <n-input placeholder="请输入手机号" v-model:value="formParams.phone" />
          </n-form-item>
          <n-form-item label="评论内容" path="content">
            <n-input placeholder="请输入评论内容" v-model:value="formParams.content" />
          </n-form-item>
          <n-form-item label="房间ID" path="houseId">
            <n-input placeholder="请输入房间ID" v-model:value="formParams.houseId" />
          </n-form-item>
          <n-form-item label="房间标题" path="title">
            <n-input placeholder="请输入房间标题" v-model:value="formParams.title" />
          </n-form-item>
          <n-form-item label="房间预览图" path="title">
            <n-image width="100" :src="formParams.img" />
          </n-form-item>
          <n-form-item label="评论时间" path="createTime">
            <n-input v-model:value="formParams.createTime" />
          </n-form-item>
        </n-form>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, reactive, ref } from 'vue';
  import { getUserById } from '@/api/system/user';
  import { getHouseById } from '@/api/system/house';

  const rules = {
    label: {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    },
    path: {
      required: true,
      message: '请输入路径',
      trigger: 'blur',
    },
  };

  defineProps({
    title: {
      type: String,
      default: '评论详情',
    },
    width: {
      type: Number,
      default: 450,
    },
  });

  const formRef: any = ref(null);
  let isDrawer = ref(false);
  let formParams = reactive({
    username: '',
    phone: '',
    userId: '',
    houseId: '',
    title: '',
    img: '',
    createTime: '',
    content: '',
  });

  async function openDrawer(record) {
    isDrawer.value = true;
    formParams.houseId = record.houseId;
    formParams.createTime = record.createTime;
    formParams.userId = record.userId;
    formParams.content = record.content;
    await getUserById(formParams.userId).then((res: any) => {
      formParams.username = res.username;
      formParams.phone = res.phoneNumber;
    });
    await getHouseById(formParams.houseId).then((res: any) => {
      formParams.img = res.img;
      formParams.title = res.title;
    });
  }
  defineExpose({
    openDrawer,
  });
</script>
<style lang="less" scoped></style>
